{/* Copyright 2025 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '../../src/Layout';
export default Layout;
import {FunctionAPI} from '../../src/FunctionAPI';
import docs from 'docs:@react-aria/i18n';

export const section = 'Utilities';
export const description = 'Provides access to the current locale and layout direction.';

# useLocale

<PageDescription>{docs.exports.useLocale.description}</PageDescription>

## Introduction

`useLocale` allows components to access the current locale and interface layout direction.
By default, this is automatically detected based on the browser or system language, but it can
be overridden by using the [I18nProvider](I18nProvider) at the root of your app.

`useLocale` should be used in the root of your app to define the
[lang](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang)
and [dir](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes
so that the browser knows which language and direction the user interface should be rendered in.

## Example

```tsx
import {useLocale} from 'react-aria';

function YourApp() {
  let {locale, direction} = useLocale();

  return (
    <div lang={locale} dir={direction}>
      {/* your app here */}
    </div>
  );
}
```

## API

<FunctionAPI function={docs.exports.useLocale} links={docs.links} />

### Locale

<ClassAPI class={docs.exports.Locale} links={docs.links} />
